<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">

      <el-tabs type="card">
        <el-tab-pane label="本地">
          <el-form-item label="储存方式">
            <el-radio-group v-model="form.type">
              <el-radio label="local">本地</el-radio>
              <el-radio label="aliyun">阿里云</el-radio>
              <el-radio label="qiniu">七牛云</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <upload-chunk :file-size="1" @uploaded="afterUpload"></upload-chunk>
            {{ file_url }}
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="阿里云">
          <el-form-item label="上传域名">
            <el-input v-model="form.oss.domain"></el-input>
          </el-form-item>
          <el-form-item label="AccessKeyId">
            <el-input v-model="form.oss.access_key_id"></el-input>
          </el-form-item>
          <el-form-item label="AccessKeySecret">
            <el-input v-model="form.oss.access_key_secret"></el-input>
          </el-form-item>
          <el-form-item label="Bucket">
            <el-input v-model="form.oss.bucket"></el-input>
          </el-form-item>
          <el-form-item label="Endpoint">
            <el-input v-model="form.oss.endpoint"></el-input>
          </el-form-item>
          <el-form-item label="上传路径">
            <el-input v-model="form.oss.path"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="七牛云">
          <el-form-item label="AccessKey">
            <el-input v-model="form.qiniu.access_key"></el-input>
          </el-form-item>
          <el-form-item label="SecretKey">
            <el-input v-model="form.qiniu.secret_key"></el-input>
          </el-form-item>
          <el-form-item label="Bucket">
            <el-input v-model="form.qiniu.bucket"></el-input>
          </el-form-item>
          <el-form-item label="绑定域名">
            <el-input v-model="form.qiniu.domain"></el-input>
          </el-form-item>
          <el-form-item label="上传路径">
            <el-input v-model="form.qiniu.path"></el-input>
          </el-form-item>
        </el-tab-pane>

      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/setting'

import UploadChunk from '@/components/UploadFile/UploadChunk.vue'

export default {
  components: {
    UploadChunk
  },
  data() {
    return {

      file_url: '',
      key: 'upload',
      form: {
        type: 'local',
        id: 0,
        description: '上传配置',
        qiniu: {
          access_key: '',
          secret_key: '',
          bucket: '',
          domain: '',
          path: ''
        },
        oss: {
          domain: '',
          access_key_id: '',
          access_key_secret: '',
          bucket: '',
          endpoint: '',
          oss_path: ''
        }
      }
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    getData() {
      api.info({ key: this.key }).then((res) => {
        if (res.code === 0) {
          this.form.oss = res.data.value.oss
          this.form.qiniu = res.data.value.qiniu
          this.form.type = res.data.value.type
          this.form.id = res.data.id
          this.form.description = res.data.description
          console.log(this.form)
        }
      })
    },

    afterUpload(url) {
      this.file_url = url
    },

    onSubmit() {
      console.log(this.form)
      let req;
      const data = {
        type: 1,
        id: this.form.id,
        key_name: this.key,
        description: this.form.description,
        title: '上传配置',
        value: JSON.stringify({
          type: this.form.type,
          oss: this.form.oss,
          qiniu: this.form.qiniu
        })
      }
      if (this.form.id > 0) {
        req = api.update(data)
      } else {
        req = api.create(data)
      }
      req.then((res) => {
        this.$message({
          type: res.code === 0 ?'success':'error',
          message: res.msg,
          duration: 500,
          onClose: () => {
            //this.$router.push({ path: '/setting/index' })
          }
        })

      }).catch((error) => {

      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.editor-content {
  margin-top: 20px;
}

.article-textarea ::v-deep {

textarea {
  padding-right: 40px;
  resize: none;
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #bfcbd9;
}

}
</style>

